<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .two{
            background-color: green;
            opacity: 0.5;
            top: 0;
            bottom: 0;
            position: fixed;
            left: 0;
            right: 0;
            z-index: 9;

        }
        .one{
            z-index: 10;
        }
        .inputs{
            opacity: 0.5;
            position: fixed;
            z-index: 11;
            width: 600px;
            height: 400px;
            left:  50%;
            right: 50%;
            top: 50%;
            bottom: 50%;
            background-color: #9acfea;
            margin-left: -200px;
        .edit{
            background-color: #2aabd2;
        }

        }

    </style>
</head>
<body>
{#    <h3>业务线列表</h3>#}
{#    <ul>#}
{#    {% for i in v1 %}#}
{#        <li>主机名:{{ i.name }} IP: {{ i.ip }} 端口: {{ i.port }}业务：{{ i.business.code }}-{{ i.business.caption }} 薪水{{ i.business.dollars.salary }} </li>#}
{#    {% endfor %}#}
{#    </ul>#}
{##}
{#    <h3>业务线列表</h3>#}
{#    <ul>#}
{#    {% for i in v2 %}#}
{#        <li>主机名:{{ i.name }} IP: {{ i.ip }} 端口: {{ i.port }}业务：{{ i.business__code }}-{{ i.business__caption}} </li>#}
{#    {% endfor %}#}
{#    </ul>#}
{##}
{#    <h3>业务线列表</h3>#}
{#    <ul>#}
{#    {% for i in v3 %}#}
{#        <li>主机名:{{ i.0 }} IP: {{ i.1 }} 端口: {{ i.2 }}业务：{{ i.3 }}-{{ i.4 }} </li>#}
{#    {% endfor %}#}
{#    </ul>#}

    <div id="one" class="one">
        <table  border="1" style="solid-color: red">
            <thead>
            <tr>
                <td>序号</td>
                <td>应用名</td>
                <td>主机</td>
            </tr>

            </thead>

            <tbody>
                {% for row in v1 %}
                    <tr>
                        <td >{{ forloop.counter0 }}</td> <!--循环的计数器,counter0 从0开始-->
                        <td class="application">{{ row.name }}</td>
                        <td class="tds">
                        {% for i in row.r.all  %}
                            <span class="hid" hid={{ i.nid }}>{{ i.name }}</span>
                        {% endfor %}
                        </td>
                        <td><a class="edit">编辑</a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <input id="addinfo" type="button" value="添加"/>
    </div>
    <div id="two" class="two hide"></div>
    <div id="inputs" class="inputs hide">
        <form method="POST" action="/host/app/" id="addform" >
            应用：<input hid={{ v.id }} id="application" type="text" name="application"/ ><br>
{#            选择主机#}
            <select id="host" name="host" multiple>
                {% for op in host %}
                    <option value="{{ op.nid }}">{{ op.name }}</option>
                {% endfor %}
            </select><br>
            <span id="text"></span>
            <input type="submit" value="提交">
            <input id="ajax_submit" type="button" value="Ajax提交">
        </form>
    </div>
    <div id="edit_div" class="inputs hide">
        <form method="POST" action="/host/app/" id="edit_form" name="edit" >
            应用：<input  id="edit_application" type="text" name="edit_application"/ ><br>
{#            选择主机#}
            <select id="selecthost" name="host" multiple>
                {% for op in host %}
                    <option  id="sos" value="{{ op.nid }}">{{ op.name }}</option>
                {% endfor %}
            </select><br>
            <span id="text"></span>
            <input id="edit_Ajax" type="button" value="确认编辑">
        </form>
    </div>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $('#addinfo').click(function () {
                $("#two").removeClass('hide');
                $("#inputs").removeClass('hide');

            })
        });
        $('#ajax_submit').click(function () {
            $.ajax({
            type:'POST',
            url:'/host/app/',
            data:$('#addform').serialize(),
                traditional:true,
                dataType:'JSON',
                success: function (data) {
                obj = data;

                if (obj.status){
                    location.reload();
                }else{
                    $('#text').text(obj.error_msg)
                }
            }
            })
        });
        $('.edit').click(function () {
            $("#two").removeClass('hide');
            $('#edit_div').removeClass('hide');
            {#显示表格中的其他列#}
            var app = $(this).closest("tr").find('.application').text()

            $('#edit_application').val(app);
            var temp = []
            $(this).parent().prev().children().each(function(){
                var hosts=$(this).attr('hid')
                temp.push(hosts)
            })
            console.log(temp)
            $('#edit_form').find('select').val(temp)
        });
        $('#edit_Ajax').click(function () {
            var app_id = $(this).closest("tr").find('.hid')
            console.log(app_id)
            $('#edit_Ajax').attr('app_id',)
            $.ajax({
                type: 'POST',
                url: '/host/app/',
                data: $('#edit_form').serialize(),
                traditional: true,
                dataType: 'JSON',
                success: function (data) {
                    obj = data;

                }
            })
            });
    </script>
</body>
</html>